<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>找小区</title>
  <link rel="icon" href="img/logo.ico" type="images/x-ico" />
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="css/zhaoxiaoqu_hjx.css">
  <link rel="stylesheet" href="fonts/fonts_village/iconfont.css">
  <script src="js/zepto.js"></script>
<!-- <script src="js/rem1.js"></script> -->
  
</head>

<body>
  <!-- 头部 -->
  <div class="header all">
    <span class="iconfont icon-zuojiantou jt" id="home"></span>
    <div class="logo">
      <a class="header_city" id="city">合肥
        <span class="iconfont icon-xiajiantou jt_s"></span>
      </a>
      <img src="img/logo.png" alt="">
      <span class="iconfont icon-user"></span>
    </div>
  </div>
  <!-- 搜索框 -->
  <div class="search all all_pd">
    <a href="##">
      <span class="iconfont icon-search"></span>
      <input type="text" placeholder="请输入小区或商圈名~">
    </a>
  </div>
  <!-- 类型选择 -->
  <ul class="option all all_pd option_flexd">
    <li class="tab_option">区域<span class="sjx"></span></li>
    <li class="tab_option">均价<span class="sjx"></span></li>
    <li class="tab_option">类型<span class="sjx"></span></li>
    <li class="tab_option">楼龄<span class="sjx"></span></li>
  </ul>
  <!-- 隐藏的类型 -->
  <div class="hide_option">
    <ul class="option all all_pd">
      <li class="tab_option_1 active">区域<span class="sjx"></span></li>
      <li class="tab_option_1">均价<span class="sjx"></span></li>
      <li class="tab_option_1">类型<span class="sjx"></span></li>
      <li class="tab_option_1">楼龄<span class="sjx"></span></li>
    </ul>
    <div class="_city hide_div">
      <div class="left">
        <p class="list_change">区域</p>
      </div>
      <div class="center">
        <p class="list_change city_1 active">不限</p>
        <p class="list_change city_1">包河</p>
        <p class="list_change city_1">巢湖市</p>
        <p class="list_change city_1">庐江县</p>
        <p class="list_change city_1">蜀山</p>
        <p class="list_change city_1">庐阳</p>
        <p class="list_change city_1">瑶海</p>
        <p class="list_change city_1">政务</p>
        <p class="list_change city_1">滨湖新区</p>
        <p class="list_change city_1">经开</p>
        <p class="list_change city_1">高新</p>
      </div>
      <div class="right add_city_right">
        <p class="list_change city_2 city_2_default active">不限</p>
      </div>
    </div>
    <div class="_price hide_div">
      <p class="list_change" data-value="均价">不限</p>
      <p class="list_change" data-value="2万以下">1万以下</p>
      <p class="list_change" data-value="2-3万">1-1.5万</p>
      <p class="list_change" data-value="3-4万">1.5-2万</p>
      <p class="list_change" data-value="4-5万">2-3万</p>
      <p class="list_change" data-value="5-6万">3万以上</p>
      <p class="list_change" data-value="其他">自定义价格
        <span> <input type="text" placeholder="最小"> - <input type="text" placeholder="最大"> <button>确定</button></span>
      </p>
    </div>
    <div class="_type hide_div">
      <p class="list_change">塔楼
        <span class="checkbox"></span>
      </p>
      <p class="list_change">板楼
        <span class="checkbox"></span>
      </p>
      <p class="list_change">板塔结合
        <span class="checkbox"></span>
      </p>
      <p class="list_change">其他
        <span class="checkbox"></span>
      </p>
      <button class="true">确定</button>
    </div>
    <div class="_age hide_div">
      <p class="list_change">5年以内
        <span class="checkbox"></span>
      </p>
      <p class="list_change">10年以内
        <span class="checkbox"></span>
      </p>
      <p class="list_change">15年以内
        <span class="checkbox"></span>
      </p>
      <p class="list_change">20年以内
        <span class="checkbox"></span>
      </p>
      <p class="list_change">20年以上
        <span class="checkbox"></span>
      </p>
      <button class="true">确定</button>
    </div>
  </div>
  <!-- 小区列表 -->
  <ul class="lists_add all all_pd" style="background-color: #fff;">

  </ul>

  <!-- 底部 -->
  <div class="kem__footer">
    <div class="footer-breadcrumb">
      贝壳找房合肥站
      <span>|</span> 营业执照
      <span>|</span> ICP证
    </div>
    <div class="footer-nav">
      <div class="link-tit">
        <h3 class="tit active" id="ho_tp">南圈小区</h3>
        <h3 class="tit " id="ho_tpl">热门小区</h3>
      </div>
      <div class="link-cont">
        <ul class="cont co1">
          <li><a href="#">海棠二手房</a></li>
          <li><a href="#">庐阳区小区</a></li>
          <li><a href="#">南七小区</a></li>
          <li><a href="#">长丰小区</a></li>
          <li><a href="#">铜陵路小区</a></li>
          <li><a href="#">染坊小区</a></li>
          <li><a href="#">七里塘小区</a></li>
          <li><a href="#">七里站小区</a></li>
          <li><a href="#">城东小区</a></li>
          <li><a href="#">芙蓉小区</a></li>
          <li><a href="#">肥西小区</a></li>
          <li><a href="#">芙蓉小区</a></li>
        </ul>
        <ul class="cont co2">
          <li><a href="#">创智广场</a></li>
          <li><a href="#">国徽苑</a></li>
          <li><a href="#">国光万豪广场</a></li>
          <li><a href="#">大富绿洲</a></li>
          <li><a href="#">蓝光时代红街</a></li>
          <li><a href="#">博澳丽苑</a></li>
          <li><a href="#">江南新里程</a></li>
          <li><a href="#">力高共和城</a></li>
          <li><a href="#">万振逍遥苑</a></li>
          <li><a href="#">宝利丰广场 </a></li>
          <li><a href="#">国耀园上园</a></li>
          <li><a href="#">松芝万象城</a></li>
        </ul>
      </div>
    </div>
    <div class="bottom-info ke">
      <div class="icon-box">
        <span class="icon-iphone ">iPhone客户端</span>
        <span class="icon-android ">Android客户端</span>
      </div>
      <div class="copyright">
        <p class="company">天津小屋信息科技有限公司</p>
        <p class="record">C座一层112室09单元</p>
        <p class="record">电话:111111111</p>
        <p class="record">网络经营许可证</p>
        <p class="record">津ICP备18000836号</p>
        <p class="record">网络文化经营许可证 津网文（2017）2063-011号</p>
        <p class="record">ICP经营许可证 津B2-20170026</p>
        <p class="record">copyright©</p>
        <p class="record">
          <a href="##"><img src="img/f2.png" alt=""> 津公网安备 12019002000223号</a>
        </p>
      </div>
    </div>
  </div>
  </div>
  <div class="alert"
    style="width: 2rem;background-color: rgba(0, 0, 0, 0.5);height: 1rem; position: fixed; top: 50%;line-height: 1rem;text-align: center;left: 50%;color: #fff;transform: translateX(-50%);font-size: .4rem;display: none;">
    加载中...
  </div>

</body>

<script>

  //类型选择tab切换
  $('.tab_option').on('click', function () {
    $('.hide_option').show()
    num = $(this).index()
    $('.tab_option_1').eq(num).addClass('active').siblings().removeClass('active')
    $('.hide_div').eq(num).show().siblings('.hide_div').hide()
  })
  $('.tab_option_1').on('click', function (e) {
    num = $(this).index()
    $(this).addClass('active').siblings().removeClass('active')
    e.stopPropagation()
    $('.hide_div').eq(num).show().siblings('.hide_div').hide()
  })
  $('.hide_option').click(() => {
    $('.hide_option').hide()
  })
  $('.hide_div').click((e) => {
    e.stopPropagation()
  })
  //区域点击
  var city_arr = [
    ['不限'],
    ['不限', '包公', '常青', '淝河镇', '望湖', '芜湖路', '周谷堆'],
    ['不限', '巢湖', '肥东'],
    ['不限', '巢湖', '肥西', '庐江县'],
    ['不限', '长丰', '长宁', '稻香村', '肥西', '琥珀', '井岗镇', '南岗镇', '南七', '三里庵', '五里墩', '小庙镇', '新产业园', '西园'],
    ['不限', '北城', '亳州', '大杨镇', '海棠', '林店', '三十岗乡', '三孝口', '森林公园', '双岗', '四里河', '逍遥津', '杏花村', '杏林'],
    ['不限', '长淮', '城东', '大兴镇', '方庙', '肥东', '和平路', '红光', '嘉山路', '龙岗', '明光路', '七里站', '三里街', '胜利路', '铜陵路'],
    ['不限', '笔架山', '荷叶池', '南七', '兴园'],
    ['不限', '滨湖世纪', '大于镇', '方兴', '肥东', '工业园', '环湖CBD', '驼岗', '烟墩', '义城'],
    ['不限', '芙蓉', '海恒', '锦绣', '莲花', '临湖'],
    ['不限', '长宁', '南岗', '蜀麓', '天乐', '小庙镇', '兴园']
  ]
  $('._city .city_1').on('click', function () {
    $(this).addClass('active').siblings('.city_1').removeClass('active')
    $('.add_city_right').get(0).innerHTML = ''
    for (var i = 0; i < city_arr[$(this).index()].length; i++) {
      $('.add_city_right').get(0).innerHTML += `
                <p class="list_change city_2">${city_arr[$(this).index()][i]}</p>
                `
    }
    if ($('.add_city_right .active').length == 0) {
      $('.add_city_right .city_2').eq(0).addClass('active')
    }
    $('.city_2').on('click', function () {
      $(this).addClass('active').siblings('.city_2').removeClass('active')
      if ($(this).text() == '不限') {
        $('.tab_option').eq(0).html('区域' + `<span class="sjx"></span>`).removeClass('active')
      } else {
        $('.tab_option').eq(0).html($(this).text() + `<span class="sjx"></span>`).addClass('active')
      }
      $('.hide_option').hide()
    })
  })
  $('.city_2_default').on('click', function () {
    $('.hide_option').hide()
  })

  var a = 0
  window.onload = function () {
    add(a)
    setRem()
  }
  function setRem() {
    //视口的宽度
    let clientWidth = parseInt(document.documentElement.clientWidth)
    //计算比例
    let rate = (clientWidth / 750) * 100
    console.log(clientWidth, rate)
    // document.documentElement===html
    document.documentElement.style.fontSize = rate + 'px'
}
  window.onresize = setRem

  
  function add(i) {
    $('.alert').show()
    if (i < 4) {
      $.getJSON('http://118.31.73.169:3000/village?num=' + i, function (data) {
        for (var i = 0; i < data.length; i++) {
          $('.lists_add').get(0).innerHTML += `
                            <li class="list clear">
                                <div class="img _fl">
                                    <img src="${data[i].img}" alt="">
                                    <p class="blue_bg">小区攻略</p>
                                </div>
                                <div class="right _fl">
                                    <p class="name">${data[i].name}</p>
                                    <p class="present">${data[i].present}</p>
                                    <p class="price">${data[i].price}</p>
                                </div>
                            </li>
                        `;
          $('.list').on('click', function () {
            var id_num = $(this).index() + 1
            window.location.href = "zhaoxiaoqu_xiangqing_hjx.html?id=" + id_num
          })
        }
        setTimeout(() => {
          $('.alert').hide()
        }, 300);
      })
    } else {
      $('.alert').text('到底了...')
      setTimeout(() => {
        $('.alert').hide()
      }, 300);
    }

  }
  setTimeout(() => {
    window.onscroll = function () {
      if ($(this).scrollTop() > $('.kem__footer').offset().top - $('.kem__footer').height()) {
        a++
        add(a)
      }

    }
  }, 1000);
  var num_scroll = $(".option").offset().top
  window.addEventListener("scroll", function () {
    if ($(this).scrollTop() > num_scroll) {
      $('.option_flexd').addClass('flexd')
    } else if ($(this).scrollTop() < num_scroll) {
      $('.option_flexd').removeClass('flexd')
    }
  })

  if (sessionStorage.city) {
    $("#city").html(sessionStorage.city + `<span class="iconfont icon-xiajiantou jt_s"></span>`)
  } else {
    $("#city").html(`合肥<span class="iconfont icon-xiajiantou jt_s"></span>`)
  }
  $("#home").click(() => {
    window.location.href = "index_wzt.html"
  })
</script>
</html>